React experimental_useFormStatus: การจัดการสถานะข้อผิดพลาดของฟอร์มอย่างเชี่ยวชาญ

โลกของ React ที่มีการพัฒนาอย่างต่อเนื่องได้นำเสนอฟีเจอร์ใหม่ๆ ที่มุ่งเน้นการทำให้การพัฒนาง่ายขึ้นและปรับปรุงประสบการณ์ของผู้ใช้ หนึ่งในฟีเจอร์ล่าสุดที่เพิ่มเข้ามา ซึ่งปัจจุบันยังอยู่ในช่วงทดลอง คือ experimental_useFormStatus hook เครื่องมืออันทรงพลังนี้เป็นวิธีที่ง่ายและเป็นระบบในการติดตามสถานะการส่งฟอร์ม รวมถึงสถานะข้อผิดพลาดได้โดยตรงภายในคอมโพเนนต์ React ของคุณ บล็อกโพสต์นี้จะให้คำแนะนำที่ครอบคลุมเพื่อทำความเข้าใจและใช้งาน experimental_useFormStatus อย่างมีประสิทธิภาพเพื่อสร้างฟอร์มที่แข็งแกร่งและเป็นมิตรต่อผู้ใช้

ทำความเข้าใจถึงความจำเป็นของ experimental_useFormStatus

ตามปกติแล้ว การจัดการการส่งฟอร์มใน React นั้นต้องใช้โค้ด boilerplate จำนวนมาก นักพัฒนาต้องคอยติดตามสถานะการส่งข้อมูลด้วยตนเอง (กำลังรอ, สำเร็จ, ผิดพลาด) จัดการข้อความแสดงข้อผิดพลาด และอัปเดต UI ให้สอดคล้องกัน ซึ่งอาจนำไปสู่โค้ดที่ซับซ้อนและมีโอกาสเกิดข้อผิดพลาดได้ง่าย โดยเฉพาะในฟอร์มที่มีความซับซ้อนซึ่งมีกฎการตรวจสอบความถูกต้องหลายข้อและการดำเนินการแบบอะซิงโครนัส

experimental_useFormStatus เข้ามาแก้ไขปัญหานี้โดยมอบวิธีการจัดการสถานะการส่งฟอร์มแบบรวมศูนย์และเป็นแบบ declarative ช่วยให้กระบวนการติดตามข้อผิดพลาด การแสดงสถานะกำลังโหลด และการให้ฟีดแบ็กแก่ผู้ใช้ง่ายขึ้น ส่งผลให้โค้ดสะอาดขึ้น ดูแลรักษาง่ายขึ้น และมีประสิทธิภาพมากขึ้น

experimental_useFormStatus คืออะไร?

experimental_useFormStatus hook คือ React hook ที่ออกแบบมาโดยเฉพาะเพื่อให้ข้อมูลเกี่ยวกับสถานะของการส่งฟอร์ม มันทำงานร่วมกับ attribute action ขององค์ประกอบ <form> และ Server Actions (อีกหนึ่งฟีเจอร์ที่ค่อนข้างใหม่ของ React) เมื่อฟอร์มที่มี action ชี้ไปยัง Server Action ถูกส่ง experimental_useFormStatus จะให้ข้อมูลเกี่ยวกับสถานะปัจจุบันของการส่งนั้น

โดยเฉพาะอย่างยิ่ง hook นี้จะคืนค่าอ็อบเจกต์ที่มีคุณสมบัติดังต่อไปนี้:

• pending: ค่าบูลีนที่ระบุว่าการส่งฟอร์มกำลังดำเนินการอยู่หรือไม่
• data: ข้อมูลที่ถูกส่งโดยฟอร์ม
• method: เมธอด HTTP ที่ใช้ในการส่งฟอร์ม (เช่น "POST", "GET")
• action: Server Action ที่ถูกเรียกใช้โดยการส่งฟอร์ม
• error: อ็อบเจกต์ข้อผิดพลาด หากการส่งฟอร์มล้มเหลว อ็อบเจกต์นี้จะบรรจุข้อมูลเกี่ยวกับข้อผิดพลาดที่เกิดขึ้นบนเซิร์ฟเวอร์

วิธีใช้ experimental_useFormStatus

เรามาดูตัวอย่างการใช้งานจริงเพื่อแสดงวิธีใช้ experimental_useFormStatus กัน เราจะสร้างฟอร์มติดต่อง่ายๆ ที่มีช่องสำหรับชื่อ อีเมล และข้อความ และสาธิตวิธีใช้ hook เพื่อแสดงตัวบ่งชี้การโหลดและข้อความแสดงข้อผิดพลาด

ข้อกำหนดเบื้องต้น

ก่อนที่เราจะเริ่ม ตรวจสอบให้แน่ใจว่าคุณได้ตั้งค่าโปรเจกต์ React และใช้ React เวอร์ชันที่รองรับฟีเจอร์ทดลอง คุณอาจต้องเปิดใช้งานฟีเจอร์ทดลองในไฟล์ react.config.js ของคุณ (หรือการกำหนดค่าที่เทียบเท่าสำหรับเครื่องมือ build ของคุณ) นอกจากนี้ ตรวจสอบให้แน่ใจว่าคุณมี backend (เช่น Node.js กับ Express) ที่กำหนดค่าให้จัดการการส่งฟอร์มและส่งคืนการตอบกลับที่เหมาะสม

ตัวอย่าง: ฟอร์มติดต่อ

นี่คือโค้ดคอมโพเนนต์ของ React:

import React, { useState } from 'react';
import { experimental_useFormStatus as useFormStatus } from 'react-dom';

async function handleSubmit(formData) {
  'use server';

  try {
    const response = await fetch('/api/contact', {
      method: 'POST',
      body: formData,
    });

    if (!response.ok) {
      const errorData = await response.json();
      throw new Error(errorData.message || 'Form submission failed');
    }

    // Handle successful submission (e.g., redirect, show success message)
    console.log('Form submitted successfully!');
    // In a real application, you might redirect or update state here
    return { success: true, message: 'Form submitted successfully!' };

  } catch (error) {
    console.error('Error submitting form:', error);
    return { success: false, message: error.message };
  }
}

function ContactForm() {
  const [formData, setFormData] = useState({
    name: '',
    email: '',
    message: '',
  });

  const { pending, data, error } = useFormStatus();

  const handleChange = (e) => {
    setFormData({ ...formData, [e.target.name]: e.target.value });
  };

  return (
    

      

        Name:
        
      
      

        Email:
        
      
      

        Message:
              </div>
      <button type="submit" disabled={pending}>
        {pending ? 'Submitting...' : 'Submit'}
      </button>
      {error && <p className="error">Error: {error.message}</p>}
      {data?.success && <p className="success">{data.message}</p>}
    </form>
  );
}

export default ContactForm;
</code>
</pre>

<h3>คำอธิบาย</h3>

<ol>
  <li><b>การนำเข้า <code>useFormStatus</code>:</b> เรานำเข้า <code>experimental_useFormStatus</code> hook จาก <code>react-dom</code> โปรดจำไว้ว่านี่เป็นฟีเจอร์ทดลอง ดังนั้นเส้นทางการนำเข้าอาจเปลี่ยนแปลงใน React เวอร์ชันอนาคต</li>
  <li><b>สถานะของฟอร์ม:</b> ตัวแปร state <code>formData</code> ที่ใช้ <code>useState</code> จะคอยติดตามชื่อ อีเมล และข้อความที่ผู้ใช้ป้อน</li>
  <li><b><code>useFormStatus</code> Hook:</b> เราเรียกใช้ <code>useFormStatus()</code> ภายในคอมโพเนนต์ hook นี้จะให้ข้อมูลเกี่ยวกับสถานะการส่งของฟอร์มโดยอัตโนมัติเมื่อฟอร์มถูกส่งผ่าน Server Action</li>
  <li><b>การเข้าถึงคุณสมบัติสถานะ:</b> เราดึง <code>pending</code>, <code>data</code>, และ <code>error</code> จากอ็อบเจกต์ที่คืนค่าโดย <code>useFormStatus()</code></li>
  <li><b>ตัวบ่งชี้การโหลด:</b> เราใช้ค่าบูลีน <code>pending</code> เพื่อแสดงข้อความ "Submitting..." บนปุ่มส่งตามเงื่อนไข และปิดใช้งานปุ่มเพื่อป้องกันการส่งซ้ำ</li>
  <li><b>การจัดการข้อผิดพลาด:</b> หากเกิดข้อผิดพลาดระหว่างการส่งฟอร์ม (ตามที่ระบุโดยคุณสมบัติ <code>error</code>) เราจะแสดงข้อความแสดงข้อผิดพลาดให้ผู้ใช้เห็น</li>
  <li><b>ข้อความแสดงความสำเร็จ:</b> หากการส่งสำเร็จ (ซึ่งกำหนดโดย Server Action ที่คืนค่า { success: true, message: '...' }) เราจะแสดงข้อความแสดงความสำเร็จ</li>
  <li><b>Server Action:</b> ฟังก์ชัน <code>handleSubmit</code> ถูกทำเครื่องหมายด้วย <code>'use server'</code> ทำให้มันเป็น Server Action มันใช้ <code>fetch</code> เพื่อส่งข้อมูลฟอร์มไปยัง API endpoint (<code>/api/contact</code>)</li>
  <li><b>การจัดการข้อผิดพลาดใน Server Action:</b> Server Action พยายามจัดการการเรียก API และข้อผิดพลาดที่อาจเกิดขึ้น หากมีข้อผิดพลาดในการตอบกลับของ API หรือมีข้อยกเว้น มันจะคืนค่า <code>{ success: false, message: '...' }</code> จากนั้นข้อความนี้จะพร้อมใช้งานในคุณสมบัติ <code>error</code> ของ <code>useFormStatus</code> hook</li>
  <li><b>Attribute Action:</b> attribute <code>action</code> ของแท็ก <code><form></code> ถูกตั้งค่าเป็น <code>handleSubmit</code> Server Action ซึ่งเป็นการบอกให้ React ใช้ฟังก์ชันนี้เมื่อฟอร์มถูกส่ง</li>
</ol>

<h3>Backend (ตัวอย่างง่ายๆ โดยใช้ Node.js และ Express)</h3>

<p>นี่คือตัวอย่างพื้นฐานของเซิร์ฟเวอร์ Node.js ที่ใช้ Express เพื่อจัดการการส่งฟอร์ม:</p>

<pre>
<code>
const express = require('express');
const bodyParser = require('body-parser');
const cors = require('cors');

const app = express();
const port = 3001;

app.use(cors());
app.use(bodyParser.urlencoded({ extended: true }));
app.use(bodyParser.json());

app.post('/api/contact', (req, res) => {
  const { name, email, message } = req.body;

  // Simulate server-side validation or processing (e.g., sending an email)
  if (!name || !email || !message) {
    return res.status(400).json({ message: 'All fields are required.' });
  }

  if (!email.includes('@')) {
     return res.status(400).json({message: 'Invalid email format.'});
  }

  // Simulate a successful operation with a delay
  setTimeout(() => {
    console.log('Form data received:', { name, email, message });
    res.status(200).json({ message: 'Form submitted successfully!' });
  }, 1000);
});

app.listen(port, () => {
  console.log(`Server listening at http://localhost:${port}`);
});
</code>
</pre>

<h3>ข้อควรพิจารณาที่สำคัญสำหรับ Backend:</h3>

<ul>
  <li><b>การตรวจสอบความถูกต้อง:</b> ควรทำการตรวจสอบความถูกต้องฝั่งเซิร์ฟเวอร์เสมอเพื่อความสมบูรณ์และความปลอดภัยของข้อมูล</li>
  <li><b>การจัดการข้อผิดพลาด:</b> นำการจัดการข้อผิดพลาดที่แข็งแกร่งมาใช้เพื่อดักจับปัญหาที่ไม่คาดคิดและส่งคืนข้อความแสดงข้อผิดพลาดที่มีความหมายไปยังไคลเอนต์</li>
  <li><b>ความปลอดภัย:</b> ทำความสะอาดและตรวจสอบข้อมูลที่ป้อนเข้ามาทั้งหมดเพื่อป้องกันช่องโหว่ด้านความปลอดภัย เช่น cross-site scripting (XSS) และ SQL injection</li>
  <li><b>CORS:</b> กำหนดค่า Cross-Origin Resource Sharing (CORS) อย่างเหมาะสมเพื่ออนุญาตคำขอจากโดเมนของแอปพลิเคชัน React ของคุณ</li>
  <li><b>การตอบกลับแบบ JSON:</b> ส่งคืนการตอบกลับแบบ JSON ไปยังไคลเอนต์พร้อมกับ HTTP status code ที่เหมาะสม (เช่น 200 สำหรับความสำเร็จ, 400 สำหรับข้อผิดพลาดของไคลเอนต์, 500 สำหรับข้อผิดพลาดของเซิร์ฟเวอร์)</li>
</ul>

<h2>ประโยชน์ของการใช้ <code>experimental_useFormStatus</code></h2>

<ul>
  <li><b>การจัดการฟอร์มที่ง่ายขึ้น:</b> การจัดการสถานะการส่งฟอร์มแบบรวมศูนย์ช่วยลดโค้ด boilerplate และปรับปรุงความสามารถในการอ่านโค้ด</li>
  <li><b>ประสบการณ์ผู้ใช้ที่ดีขึ้น:</b> ฟีดแบ็กแบบเรียลไทม์เกี่ยวกับสถานะการส่งฟอร์ม (ตัวบ่งชี้การโหลด, ข้อความแสดงข้อผิดพลาด) ช่วยเพิ่มการมีส่วนร่วมของผู้ใช้และลดความคับข้องใจ</li>
  <li><b>การจัดการข้อผิดพลาดที่ดียิ่งขึ้น:</b> การเข้าถึงข้อมูลข้อผิดพลาดโดยละเอียดได้ง่ายขึ้นช่วยให้สามารถจัดการข้อผิดพลาดได้ตรงจุดมากขึ้นและปรับปรุงการดีบัก</li>
  <li><b>แนวทางแบบ Declarative:</b> hook นี้มอบวิธีการจัดการสถานะฟอร์มแบบ declarative ทำให้โค้ดสามารถคาดการณ์ได้และง่ายต่อการทำความเข้าใจ</li>
  <li><b>การผสานรวมกับ Server Actions:</b> การผสานรวมอย่างราบรื่นกับ React Server Actions ช่วยให้การดึงและแก้ไขข้อมูลง่ายขึ้น นำไปสู่แอปพลิเคชันที่มีประสิทธิภาพและทำงานได้ดีขึ้น</li>
</ul>

<h2>กรณีการใช้งานขั้นสูง</h2>

<p>นอกเหนือจากตัวอย่างพื้นฐานแล้ว <code>experimental_useFormStatus</code> ยังสามารถใช้ในสถานการณ์ที่ซับซ้อนมากขึ้นได้:</p>

<h3>1. การจัดการหลายฟอร์มในหน้าเดียว</h3>

<p>หากคุณมีหลายฟอร์มในหน้าเดียว แต่ละฟอร์มจะมีอินสแตนซ์ <code>useFormStatus</code> ของตัวเอง ทำให้คุณสามารถติดตามสถานะการส่งของแต่ละฟอร์มได้อย่างอิสระ</p>

<h3>2. การใช้ตรรกะการตรวจสอบความถูกต้องแบบกำหนดเอง</h3>

<p>คุณสามารถผสาน <code>useFormStatus</code> เข้ากับตรรกะการตรวจสอบความถูกต้องแบบกำหนดเองเพื่อแสดงข้อผิดพลาดในการตรวจสอบความถูกต้องแบบเรียลไทม์ ตัวอย่างเช่น คุณสามารถใช้ไลบรารีการตรวจสอบความถูกต้องเช่น Yup หรือ Zod เพื่อตรวจสอบข้อมูลฟอร์มฝั่งไคลเอนต์ก่อนที่จะส่งไปยังเซิร์ฟเวอร์ จากนั้น Server Action สามารถส่งคืนข้อผิดพลาดในการตรวจสอบความถูกต้องตามกฎของฝั่ง backend ซึ่งสามารถแสดงผลโดยใช้ <code>useFormStatus</code> ได้</p>

<h3>3. Optimistic Updates</h3>

<p>คุณสามารถใช้ <code>useFormStatus</code> เพื่อใช้ Optimistic Updates โดยคุณจะอัปเดต UI ทันทีหลังจากที่ผู้ใช้ส่งฟอร์ม โดยสมมติว่าการส่งจะสำเร็จ หากการส่งล้มเหลว คุณสามารถย้อนกลับ UI ไปยังสถานะก่อนหน้าและแสดงข้อความแสดงข้อผิดพลาด</p>

<h3>4. ตัวบ่งชี้ความคืบหน้าสำหรับการอัปโหลดไฟล์</h3>

<p>แม้ว่า <code>useFormStatus</code> จะไม่ได้ให้ข้อมูลอัปเดตความคืบหน้าสำหรับการอัปโหลดไฟล์โดยตรง แต่คุณสามารถรวมมันเข้ากับเทคนิคอื่นๆ (เช่น การใช้ <code>XMLHttpRequest</code> object และอีเวนต์ <code>upload.onprogress</code>) เพื่อแสดงตัวบ่งชี้ความคืบหน้าให้ผู้ใช้เห็น</p>

<h2>ข้อผิดพลาดที่พบบ่อยและวิธีหลีกเลี่ยง</h2>

<ul>
  <li><b>ไม่ได้ใช้ Server Actions:</b> <code>experimental_useFormStatus</code> ถูกออกแบบมาเพื่อทำงานกับ React Server Actions เป็นหลัก หากคุณไม่ได้ใช้ Server Actions คุณจะต้องจัดการสถานะการส่งฟอร์มและอัปเดต UI ด้วยตนเอง ซึ่งขัดกับวัตถุประสงค์ของการใช้ hook นี้</li>
  <li><b>การจัดการข้อผิดพลาดที่ไม่ถูกต้องบนเซิร์ฟเวอร์:</b> ตรวจสอบให้แน่ใจว่าโค้ดฝั่งเซิร์ฟเวอร์ของคุณจัดการข้อผิดพลาดอย่างเหมาะสมและส่งคืนข้อความแสดงข้อผิดพลาดที่มีความหมายไปยังไคลเอนต์ คุณสมบัติ <code>error</code> ของ <code>useFormStatus</code> hook จะมีข้อมูลเกี่ยวกับข้อผิดพลาดที่เกิดขึ้นบนเซิร์ฟเวอร์เท่านั้น</li>
  <li><b>การละเลยช่องโหว่ด้านความปลอดภัยที่อาจเกิดขึ้น:</b> ควรทำความสะอาดและตรวจสอบข้อมูลที่ผู้ใช้ป้อนทั้งฝั่งไคลเอนต์และฝั่งเซิร์ฟเวอร์เสมอเพื่อป้องกันช่องโหว่ด้านความปลอดภัย</li>
  <li><b>การไม่ให้ฟีดแบ็กแก่ผู้ใช้:</b> เป็นสิ่งสำคัญอย่างยิ่งที่จะต้องให้ฟีดแบ็กที่ชัดเจนและทันท่วงทีแก่ผู้ใช้เกี่ยวกับสถานะการส่งฟอร์ม (ตัวบ่งชี้การโหลด, ข้อความแสดงข้อผิดพลาด, ข้อความแสดงความสำเร็จ) สิ่งนี้จะช่วยปรับปรุงประสบการณ์ของผู้ใช้และลดความคับข้องใจ</li>
</ul>

<h2>แนวทางปฏิบัติที่ดีที่สุดสำหรับการใช้ <code>experimental_useFormStatus</code></h2>

<ul>
  <li><b>ใช้ข้อความแสดงข้อผิดพลาดที่มีความหมาย:</b> ให้ข้อความแสดงข้อผิดพลาดที่ชัดเจนและกระชับซึ่งช่วยให้ผู้ใช้เข้าใจว่าเกิดอะไรขึ้นและจะแก้ไขได้อย่างไร</li>
  <li><b>ใช้การตรวจสอบความถูกต้องฝั่งไคลเอนต์:</b> ตรวจสอบข้อมูลฟอร์มฝั่งไคลเอนต์ก่อนที่จะส่งไปยังเซิร์fเวอร์เพื่อลดคำขอที่ไม่จำเป็นไปยังเซิร์ฟเวอร์และปรับปรุงประสบการณ์ของผู้ใช้</li>
  <li><b>จัดการข้อผิดพลาดอย่างเหมาะสม:</b> นำการจัดการข้อผิดพลาดที่แข็งแกร่งมาใช้เพื่อดักจับปัญหาที่ไม่คาดคิดและป้องกันไม่ให้แอปพลิเคชันของคุณขัดข้อง</li>
  <li><b>ทดสอบฟอร์มของคุณอย่างละเอียด:</b> ทดสอบฟอร์มของคุณด้วยข้อมูลและสถานการณ์ที่แตกต่างกันเพื่อให้แน่ใจว่าทำงานได้อย่างถูกต้องและการจัดการข้อผิดพลาดทำงานตามที่คาดไว้</li>
  <li><b>รักษาโค้ดของคุณให้สะอาดและอ่านง่าย:</b> ใช้ชื่อตัวแปรและคอมเมนต์ที่สื่อความหมายเพื่อให้โค้ดของคุณเข้าใจและดูแลรักษาง่ายขึ้น</li>
  <li><b>ให้ความสำคัญกับการเข้าถึงได้ (Accessibility):</b> ตรวจสอบให้แน่ใจว่าฟอร์มของคุณสามารถเข้าถึงได้โดยผู้ใช้ทุกคน รวมถึงผู้ที่มีความพิการ ใช้ HTML เชิงความหมาย (semantic HTML) ระบุป้ายกำกับที่เหมาะสมสำหรับช่องฟอร์ม และตรวจสอบให้แน่ใจว่าข้อความแสดงข้อผิดพลาดสามารถมองเห็นและเข้าใจได้ชัดเจน</li>
</ul>

<h2>ข้อควรพิจารณาด้านการทำให้เป็นสากล (Internationalization)</h2>

<p>เมื่อสร้างฟอร์มสำหรับผู้ชมทั่วโลก ให้พิจารณาประเด็นด้านการทำให้เป็นสากลดังต่อไปนี้:</p>

<ul>
  <li><b>การแปลข้อความแสดงข้อผิดพลาด (Localization):</b> ตรวจสอบให้แน่ใจว่าข้อความแสดงข้อผิดพลาดได้รับการแปลเป็นภาษาที่ผู้ใช้ต้องการ คุณสามารถใช้ไลบรารีการแปล เช่น <code>i18next</code> เพื่อจัดการการแปล</li>
  <li><b>การจัดรูปแบบวันที่และตัวเลข:</b> ใช้รูปแบบวันที่และตัวเลขที่เหมาะสมตามท้องถิ่นของผู้ใช้</li>
  <li><b>รูปแบบที่อยู่:</b> ปรับช่องฟอร์มที่อยู่ให้ตรงกับรูปแบบที่อยู่ของประเทศต่างๆ ตัวอย่างเช่น บางประเทศใช้รหัสไปรษณีย์ก่อนชื่อเมือง ในขณะที่บางประเทศใช้ทีหลัง</li>
  <li><b>การตรวจสอบหมายเลขโทรศัพท์:</b> ใช้การตรวจสอบหมายเลขโทรศัพท์ที่รองรับรหัสประเทศและรูปแบบหมายเลขโทรศัพท์ที่แตกต่างกัน</li>
  <li><b>เลย์เอาต์แบบขวาไปซ้าย (RTL):</b> รองรับเลย์เอาต์ RTL สำหรับภาษาต่างๆ เช่น ภาษาอาหรับและฮีบรู</li>
</ul>

<p>ตัวอย่างเช่น ฟอร์มที่ขอหมายเลขโทรศัพท์ควรปรับเปลี่ยนกฎการตรวจสอบความถูกต้องแบบไดนามิกขึ้นอยู่กับประเทศที่ผู้ใช้เลือก หมายเลขโทรศัพท์ในสหรัฐอเมริกาจะต้องมี 10 หลัก ในขณะที่หมายเลขโทรศัพท์ในสหราชอาณาจักรอาจต้องมี 11 หลักรวมถึงเลขศูนย์นำหน้า ในทำนองเดียวกัน ข้อความแสดงข้อผิดพลาดเช่น "Invalid phone number format" จะต้องถูกแปลเป็นภาษาของผู้ใช้</p>

<h2>สรุป</h2>

<p><code>experimental_useFormStatus</code> เป็นส่วนเสริมที่มีคุณค่าสำหรับชุดเครื่องมือของ React ซึ่งนำเสนอวิธีการจัดการสถานะการส่งฟอร์มที่เรียบง่ายและเป็นแบบ declarative ด้วยการใช้ประโยชน์จาก hook นี้ นักพัฒนาสามารถสร้างฟอร์มที่แข็งแกร่ง เป็นมิตรต่อผู้ใช้ และดูแลรักษาง่ายขึ้น เนื่องจากฟีเจอร์นี้ยังอยู่ในช่วงทดลอง อย่าลืมติดตามเอกสารล่าสุดของ React และแนวทางปฏิบัติที่ดีที่สุดของชุมชนอยู่เสมอ นำเครื่องมืออันทรงพลังนี้ไปใช้เพื่อยกระดับความสามารถในการจัดการฟอร์มของคุณและสร้างประสบการณ์ผู้ใช้ที่ยอดเยี่ยมสำหรับแอปพลิเคชันของคุณ</p></div><template id="P:4"></template></article></div><script>$RS=function(a,b){a=document.getElementById(a);b=document.getElementById(b);for(a.parentNode.removeChild(a);a.firstChild;)b.parentNode.insertBefore(a.firstChild,b);b.parentNode.removeChild(b)};$RS("S:2","P:2")</script><div hidden id="S:4"><footer class="mt-12 pt-8 border-t border-gray-200"><h3 class="text-sm font-semibold text-gray-900 mb-3 dark:text-white/90">Tags:</h3><div class="flex flex-wrap gap-2"><span class="inline-block bg-gray-100 text-gray-800 px-3 py-1 rounded-full text-sm hover:bg-gray-200 transition-colors dark:bg-neutral-800 dark:text-white dark:hover:bg-neutral-700">React</span><span class="inline-block bg-gray-100 text-gray-800 px-3 py-1 rounded-full text-sm hover:bg-gray-200 transition-colors dark:bg-neutral-800 dark:text-white dark:hover:bg-neutral-700">useFormStatus</span><span class="inline-block bg-gray-100 text-gray-800 px-3 py-1 rounded-full text-sm hover:bg-gray-200 transition-colors dark:bg-neutral-800 dark:text-white dark:hover:bg-neutral-700">การจัดการฟอร์ม</span><span class="inline-block bg-gray-100 text-gray-800 px-3 py-1 rounded-full text-sm hover:bg-gray-200 transition-colors dark:bg-neutral-800 dark:text-white dark:hover:bg-neutral-700">การตรวจสอบความถูกต้องของฟอร์ม</span><span class="inline-block bg-gray-100 text-gray-800 px-3 py-1 rounded-full text-sm hover:bg-gray-200 transition-colors dark:bg-neutral-800 dark:text-white dark:hover:bg-neutral-700">การจัดการข้อผิดพลาด</span><span class="inline-block bg-gray-100 text-gray-800 px-3 py-1 rounded-full text-sm hover:bg-gray-200 transition-colors dark:bg-neutral-800 dark:text-white dark:hover:bg-neutral-700">React hooks</span><span class="inline-block bg-gray-100 text-gray-800 px-3 py-1 rounded-full text-sm hover:bg-gray-200 transition-colors dark:bg-neutral-800 dark:text-white dark:hover:bg-neutral-700">ฟีเจอร์ทดลอง</span><span class="inline-block bg-gray-100 text-gray-800 px-3 py-1 rounded-full text-sm hover:bg-gray-200 transition-colors dark:bg-neutral-800 dark:text-white dark:hover:bg-neutral-700">ประสบการณ์ผู้ใช้</span><span class="inline-block bg-gray-100 text-gray-800 px-3 py-1 rounded-full text-sm hover:bg-gray-200 transition-colors dark:bg-neutral-800 dark:text-white dark:hover:bg-neutral-700">การพัฒนาเว็บ</span><span class="inline-block bg-gray-100 text-gray-800 px-3 py-1 rounded-full text-sm hover:bg-gray-200 transition-colors dark:bg-neutral-800 dark:text-white dark:hover:bg-neutral-700">สถานะฟอร์ม</span><span class="inline-block bg-gray-100 text-gray-800 px-3 py-1 rounded-full text-sm hover:bg-gray-200 transition-colors dark:bg-neutral-800 dark:text-white dark:hover:bg-neutral-700">สถานะการส่งข้อมูล</span></div></footer></div><script>$RS("S:4","P:4")</script><script>$RC("B:1","S:1")</script></body></html>